<template>
    <!-- <Row>
        <Col span="12"> -->
            <Form ref="formValidate" :model="formValidate" :label-width="160">
                <div class="yd-header margin-top-8">
                    <span>基本信息</span>
                </div>
                
                <FormItem label="合同名称:" prop="name">
                    {{formValidate.name}}
                   
                </FormItem>
                <Row>
                    <Col span="12">
                        <FormItem label="合同类型:" prop="type">
                            {{formValidate.typeName}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="合同编号" prop="seqNo">
                            {{formValidate.seqNo}}
                            
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="签约商户:" prop="clientId">
                            {{formValidate.clientName}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="客户签约主体:" prop="clientBodyId">
                            {{formValidate.clientBodyName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="云丁签约主体:" prop="yunDingBodyId">
                            {{formValidate.yunDingBodyName}}
                            
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="网商银行账号:" prop="mybankId">
                            {{formValidate.mybankName}}
                            
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <Col span="12">
                        <FormItem label="合同有效期:">
                            {{formValidate.beginDate+'至'+formValidate.endDate}}
                        </FormItem>
                    </Col>
                    <Col span="12">
                        <FormItem label="云丁商务:" prop="principalId">
                            {{formValidate.principalName}}
                        </FormItem>
                    </Col>
                </Row>
                <Row>
                    <!-- <Col span="12">
                        <FormItem label="是否允许新建工单:">
                            <RadioGroup v-model="formValidate.canCreateOrder">
                                <Radio :label="1">
                                    <span>是</span>
                                </Radio>
                                <Radio :label="0">
                                    <span>否</span>
                                </Radio>
                            </RadioGroup>
                        </FormItem>
                    </Col> -->
                    <Col span="12">
                        <FormItem label="签约日期:">
                            {{formValidate.signDate}}
                        </FormItem>
                    </Col>
                </Row>
                <div class="yd-header margin-top-8">
                    <span>合同内容</span>
                </div>
                <Row>
                    <Col span="6">
                        <FormItem label="覆盖范围:" prop="coverageAreaType">
                            {{formValidate.coverageAreaTypeName}}
                        </FormItem>
                    </Col>
                    <Col style="line-height:32px;" span="18" v-if="formValidate.coverageAreaType!==0" class="flex">
                        <div>{{areaDataview}}</div>
                    </Col>
                </Row>·
                <Row>
                    <Col span="6">
                        <FormItem label="结算方式:" prop="paymentType">
                            {{formValidate.paymentTypeName}}
                        </FormItem>
                    </Col>
                    <Col span="18" v-if="formValidate.paymentType === 1">
                        <FormItem :label-width="1">
                            <Row type="flex" >
                                <Col>账单生成</Col>
                                <Col>
                                    {{formValidate.billGenerateTypeName}}
                                    
                                </Col>
                                <Col>,每月</Col>
                                <Col>
                                    {{formValidate.billGenerateDay}}
                                    
                                </Col>
                                <Col>日生成账单,账单周期为</Col>
                                <Col>
                                    {{formValidate.billRangeBegin}}
                                    
                                </Col>
                                <Col>日至</Col>
                                <Col>
                                    {{formValidate.billRangeTypeName}}
                                    
                                </Col>
                                <Col>
                                    {{formValidate.billRangeEnd}}
                                    
                                </Col>
                                <Col>日</Col>
                            </Row>
                        </FormItem>
                    </Col>
                    <Col span="12" v-if="formValidate.paymentType === 2" class="flex">
                        <FormItem :label-width="150" label="开始计算的交付日期" prop="billGenerateBeginDateStr">
                            {{formValidate.billGenerateBeginDate}}
                        </FormItem>
                        <FormItem label="预付款:" prop="prePayment">
                            {{formValidate.prePayment}}
                        </FormItem>
                        <span class="item">元</span>
                    </Col>
                </Row>
                <Row>
                    <Col span="12" class="flex">
                        <FormItem label="上门费:" prop="onsiteFee">
                            {{formValidate.onsiteFee}}
                            
                        </FormItem>
                        <span class="item">元</span>
                    </Col>
                </Row>
                <FormItem label="设备收费标准:" prop="contract_devices">
                    
                    <Table stripe :columns="fee" :data="formValidate.contract_devices"></Table>
                </FormItem>
                
                <!-- 设备model -->
                <createDevice
                    :show.sync="modal.show"
                    :deviceModel.sync="formValidate.contract_devices"
                ></createDevice>
                <!-- 覆盖范围 -->
                <createHouseModal
                    :show.sync="areaModal.show"
                    :area.sync="areaData"
                    v-show="formValidate.coverageAreaType==2"
                ></createHouseModal>
                <createAreaModal
                    :show.sync="areaModal.show"
                    :area.sync="areaData"
                    v-show="formValidate.coverageAreaType==1"
                ></createAreaModal>
            </Form>
        <!-- </Col>
    </Row> -->
    
</template>
<script>
import { http, api } from '@/libs/http'
export default {
  name: 'inner-account',
  components: {

  },
  props: {
    renterId: String
  },
  data () {
    return {
      loading: false,
      clientLoading: false, // 签约商户
      mangersignLoading: false, // 客户签约主体
      ydsignLoading: false, // 云丁签约主体
      bankLoading: false, // 网商银行账号
      ydmangerLoading: false, // 云丁商务
      contractAddShow: false, // 新建合同显示
      contractTypeList: [
        {
          label: '新装合同',
          value: 1
        },
        {
          label: '售后合同',
          value: 2
        }
      ], // 合同类型列表
      modal: {
        show: false,
        device: []
      },
      areaModal: {
        show: false,
        city: [],
        type: 'country'
      },
      filterData: {},
      keyword: '',
      phone: 'apple',
      clients: [], // 商户
      ydsign: [], // 云丁签约主体
      mangersign: [], // 客户签约主体
      bank: [], // 网商银行账号
      ydmanager: [], // 云丁商务
      fee: [
        {
          title: '收费项目',
          key: 'deviceId',
          align: 'center',
          render: (h, params) => {
            return h('div', [
              h('strong', this.capDevice(params.row.deviceId))
            ])
          }
        },
        {
          title: '设备单价(元)',
          key: 'price',
          align: 'center'

        },
        {
          title: '安装费',
          key: 'installFee',
          align: 'center'

        },
        {
          title: '数量',
          key: 'quantity',
          align: 'center'

        }

      ], // 收费标准
      areaData: [], // 覆盖范围回显数据
      areaDataview: '', // 覆盖范围查看数据
      formValidate: {
        coverageAreaType: 0,
        contract_devices: []
      }

    }
  },
  created () {
    let id = this.$props.renterId
    this.handleInit(id)
    // this.getClients();
    // this.getYdmanager();
    // this.getYdsign();
  },
  methods: {
    handleSubmit (name) {
      console.log(this.formValidate)
      this.loading = true
      this.$refs[name].validate((valid) => {
        if (valid) {
          this.formValidate.coverageArea = JSON.stringify(this.areaData)
          if (!this.$props.id) { // 新增
            http.fetch(this, api.contract_create, null, this.formValidate, (res, err) => {
              this.loading = false
              if (err || !res) return
              this.$Message.success('添加成功')
              // this.resetForm()
            })
          } else { // 更新
            http.request(this, api.contract_update, [this.$props.id], this.formValidate, (res, err) => {
              this.loading = false
              console.log(err, res)
              if (err || !res) return
              this.$Message.success('修改成功')
            })
          }
        } else {
          this.loading = false
          this.$Message.error('请完整填写表单信息')
        }
      })
    },
    handleFeeAdd () {
      this.modal.show = true
    }, // 新增收费设备
    handleDelete (index) {
      this.formValidate.contract_devices.splice(index, 1)
    }, // 设备删除
    handleArea () {
      this.areaModal.show = true
    }, // 覆盖范围设置
    async getClients (query) {
      let res = await http.fetch(this, api.client_list, null, {keyword: query})
      this.clientLoading = false
      this.clients = res.rows.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }, // 商户
    async getMangersign () {
      let res = (await http.fetch(this, api.client_overview, [this.formValidate.clientId], null)).contract_body
      this.mangersignLoading = false
      this.mangersign = res.map(item => {
        return {
          value: item.id,
          label: item.company_name
        }
      })
    }, // 客户签约主体
    async getYdsign (query) {
      let res = await http.fetch(this, api.yd_body, null, {keyword: query})
      this.ydsignLoading = false
      this.ydsign = res.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }, // 云丁签约主体
    async getBank (query) {
      let res = await http.fetch(this, api.yd_body, null, {keyword: query})
      this.bankLoading = false
      this.ydsign = res.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }, // 网商银行
    async getYdmanager (query) {
      let res = await http.fetch(this, api.client_managers_list, null, {role_id: 6, keyword: query})
      this.ydmanagerLoading = false
      this.ydmanager = res.map(item => {
        return {
          value: item.id,
          label: item.name
        }
      })
    }, // 云丁商务
    remoteMethodcClient (query) {
      if (query !== '') {
        this.clientLoading = true
        this.getClients(query)
      } else {
        this.clients = []
      }
    }, // 签约商户select
    remoteMethodMangersign (query) {
      if (!this.formValidate.clientId) {
        this.$Message.error('请选择签约商户')
      } else {
        this.mangersignLoading = true
        this.getMangersign(query)
      }
    }, // 客户签约主体select
    remoteMethodYdsign (query) {
      if (query !== '') {
        this.ydmangerLoading = true
        this.getYdsign(query)
      } else {
        this.ydsign = []
      }
    }, // 云丁签约主体select

    remoteMethodBank (query) {
      if (query !== '') {
        this.bankLoading = true
        this.getBank(query)
      } else {
        this.bank = []
      }
    }, // 网商银行账号select

    remoteMethodYdmanager (query) {
      this.ydmanagerLoading = true
      this.getYdmanager(query)
      // if (query !== '') {
      //     this.ydmanagerLoading = true;
      //     this.getYdmanager(query);
      // } else {
      //     this.ydmanager = [];
      // }
    }, // 云丁商务select
    bill_begin_change () {

    }, // 开始时间
    bill_end_change () {

    }, // 结束时间
    capDevice (value) {
      let selectModels = JSON.parse(sessionStorage.getItem('device'))
      return selectModels.find((item) => {
        return value === item.id
      }).name
    }, // 过滤设备

    clientAdd () {
      if (!this.formValidate.clientId) {
        this.$Message.error('请选择签约商户')
      } else {
        this.$router.push('/merchant/detail/' + this.formValidate.clientId + '/overview')
      }
    }, // 新增客户签约主体
    async handleInit (id) {
      this.formValidate = await http.fetch(this, api.contract_info, [id], null)
      this.formValidate.beginDate = this.formValidate.beginDate.split(' ')[0]
      this.formValidate.endDate = this.formValidate.endDate.split(' ')[0]
      this.formValidate.signDate = this.formValidate.signDate.split(' ')[0]
      this.formValidate.contract_devices = this.formValidate.contract_devices
      let data = JSON.parse(this.formValidate.coverageArea)

      // if(this.formValidate.coverageArea === 1 && data.length >=8){
      //     this.areaDataview = data.map(item=>{
      //         let str = ''
      //         str+=item.name
      //         return str
      //     })
      // }else{
      //     let str = '';
      //     this.areaDataview = data.forEach((item,index)=>{
      //         str+=item.name;
      //         return str;
      //     })
      // }
      this.areaData = data.map(item => {
        return item.name + '-' + item.id
      })
      let data1 = data.map((item, index) => {
        console.log(index)
        if (index === 7) {
          return
        }
        return item.name
      })
      console.log(data1)
      let areaDataview = ''
      if (this.formValidate.coverageAreaType === 2) { // 房源
        if (data1.length <= 3) {
          areaDataview = data1.join(',')
        } else {
          areaDataview = data1.join(',') + '等' + data1.length + '个房源'
        }
      } else { // 城市
        if (data1.length <= 7) {
          areaDataview = data1.join(',')
        } else {
          areaDataview = data1.join(',') + '等' + data1.length + '个城市'
        }
      }
      this.areaDataview = areaDataview
    }, // 初始化数据
    clientChange (id) {
      this.getMangersign(id)
    }// 签约商户改变
  }
}
</script>
<style lang="less" scoped>
    .flex{
        display: flex;
        align-items: center;
    }
    .flex-style {
        & > .ivu-col {
            display: flex;
            align-items: center;
            .flex-items {
                flex: 1;
                margin-left: 5px;
            }
        }
    }
    .item{
        margin-bottom: 24px;
        vertical-align: top;
        zoom: 1;
    }
</style>